<template>
  <div class="login-big-box" v-loading="loading">
    <div class="login-box-login">
      <div
        :class="{'login-box-inner': !isWinXP, 'login-box-inner-xp': isWinXP}"
      >
        <div
          class="main"
          v-if="alreadyAuthed"
          :style="{height: isChrome ? '482px' : '550px'}"
        >
          <el-tabs
            class="login-tab"
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane label="密码登录" name="passwordForm">
              <el-form
                class="password-form"
                :model="passwordForm"
                :rules="passwordFormRules"
                ref="passwordForm"
              >
                <el-form-item prop="username">
                  <el-input
                    v-model.trim="passwordForm.username"
                    placeholder="请输入账户/手机号"
                    clearable
                    @blur="onBlur($event)"
                    class="username-input"
                    maxlength="16"
                  >
                    <icon-font icon="iconpc-menu_zhsjh1x" slot="prefix" />
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    v-model.trim="passwordForm.password"
                    placeholder="请输入登录密码"
                    clearable
                    class="password-input"
                    show-password
                    maxlength="16"
                  >
                    <icon-font icon="iconicon-clock" slot="prefix" />
                  </el-input>
                </el-form-item>
                <el-form-item prop="imgcode">
                  <!-- <div class="imgcode">
                    <el-input
                      v-model.trim="passwordForm.imgcode"
                      placeholder="请输入图片验证码"
                      maxlength="4"
                    >
                    </el-input>
                    <el-image
                      alt="验证码"
                      class="image"
                      @click="getImgCode"
                      :src="imgcode.base64Str"
                    />
                  </div> -->
                  <div>
                    <dragBox
                      @dragStatus="dragStatus"
                      ref="dragVerify"
                      :type="0"
                    ></dragBox>
                  </div>
                </el-form-item>
                <!-- <el-form-item>
                <el-checkbox class="keep">保持登录状态</el-checkbox>
                </el-form-item>-->
                <el-form-item>
                  <div v-if="!isChrome">
                    <div>
                      <span style="color: red;"
                        >请使用谷歌浏览器，以免影响您正常体验系统。</span
                      >
                    </div>
                    <div>
                      <span
                        ><a
                          style="text-decoration: underline;"
                          href="https://m.met-ec.com/cdn/chrome_installer.exe"
                          target="_blank"
                          >点此处下载</a
                        ></span
                      >
                    </div>
                  </div>
                  <div class="foot foot-flex">
                    <!-- <span
                    @click="goRegister"
                    class="foot-right">没有账号？免费注册>></span> -->
                    <el-button
                      :disabled="!isChrome"
                      @click="goRegister"
                      class="login-btn-new"
                      type="text"
                      ><span style="color: #333;">没有账号？</span
                      ><span style="color: #4d84ff;"
                        >马上注册>></span
                      ></el-button
                    >
                    <el-button
                      type="text"
                      @click="goRetrieve"
                      :disabled="!isChrome"
                    >
                      <span style="color: #666;">忘记密码？</span>
                    </el-button>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="login-btnBox">
                    <el-button
                      @click.stop="login"
                      :loading="submitLoading"
                      :disabled="!isChrome"
                      type="primary"
                      class="login-btn"
                      >登录</el-button
                    >
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="wechart-icon-part" @click="codeShow">
                    <img :src="wechat_icon" />
                    <span>微信</span>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="短信登录" name="verifyCodeForm">
              <el-form
                class="verifyCode-form"
                :model="verifyCodeForm"
                :rules="verifyCodeFormRules"
                ref="verifyCodeForm"
              >
                <el-form-item prop="username">
                  <el-input
                    v-model.trim="verifyCodeForm.username"
                    placeholder="请输入手机号"
                    clearable
                    maxlength="11"
                    class="username-input"
                  />
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    v-model.trim="verifyCodeForm.password"
                    placeholder="请输入验证码"
                    maxlength="6"
                    class="password-input"
                  >
                    <el-button
                      type="primary"
                      slot="suffix"
                      :disabled="sendCodeDiabled"
                      :style="{color: isChrome === true ? '' : '#A7B1C7'}"
                      @click="sendCode"
                      :loading="codeLoading"
                      >{{ sendCodeTitle }}</el-button
                    >
                  </el-input>
                </el-form-item>
                <el-form-item prop="imgcode">
                  <!-- <div class="imgcode">
                    <el-input
                      v-model.trim="verifyCodeForm.imgcode"
                      placeholder="请输入图片验证码"
                      maxlength="4"
                    >
                    </el-input>
                    <el-image
                      class="image"
                      @click="getImgCode"
                      :src="imgcode.base64Str"
                    />
                  </div> -->
                  <div>
                    <dragBox
                      ref="dragVerify2"
                      @dragStatus="dragStatus"
                      :index="1"
                    ></dragBox>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div v-if="!isChrome">
                    <div>
                      <span style="color: red;"
                        >请使用谷歌浏览器，以免影响您正常体验系统。</span
                      >
                    </div>
                    <div>
                      <span
                        ><a
                          style="text-decoration: underline;"
                          href="https://m.met-ec.com/cdn/chrome_installer.exe"
                          target="_blank"
                          >点此处下载</a
                        ></span
                      >
                    </div>
                  </div>
                  <div class="foot foot-flex">
                    <!-- <span
                    @click="goRegister"
                    class="foot-right">没有账号？免费注册>></span> -->
                    <el-button
                      :disabled="!isChrome"
                      @click="goRegister"
                      class="login-btn-new"
                      type="text"
                      ><span style="color: #333;">没有账号？</span
                      ><span style="color: #4d84ff;"
                        >马上注册>></span
                      ></el-button
                    >
                    <el-button
                      type="text"
                      @click="goRetrieve"
                      :disabled="!isChrome"
                    >
                      <span style="color: #666;">忘记密码？</span>
                    </el-button>
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button
                    @click="login"
                    :loading="submitLoading"
                    :disabled="!isChrome"
                    type="primary"
                    class="login-btn"
                    >登录</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <div class="wechart-icon-part" @click="codeShow">
                    <img :src="wechat_icon" />
                    <span>微信</span>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {phone} from '@const/formValidate.js'
import {Encrypt} from '@const/utils.js'
import {
  sendVerificationCodeNoCheck,
  isMaintenance,
  // getCaptchaImage,
  initDragBox
} from '@const/api_staffCenter.js'
import {mapState} from 'vuex'
import {
  findHospitalContactById,
  checkHospitalAuthorization
} from '@const/api_authCenter.js'
import dragBox from './drag.vue'
import {hasIn} from 'lodash'
import cookie from 'js-cookie'
import md5 from 'js-md5'
// import cookieKeys from '@const/cookie-keys'

// const cookiePath = process.env.COOKIE_PATH
const LOGIN_WAY = {
  password: '0',
  verifyCodeForm: '1'
}

const TIME_COUNT = 60

export default {
  layout: 'login',
  name: 'Login',
  components: {
    dragBox
  },
  data() {
    return {
      wechat_icon: require('@assets/img/login/pc-shouye-weixin-icon.png'),
      isMaintainIng: null, //校验是否正在维护
      maintainIngInfo: null, //系统维护信息
      info: {},
      passwordForm: {
        username: '',
        password: '',
        imgcode: ''
      },
      passwordFormRules: {
        username: [
          {required: true, message: '请输入账号/手机号', trigger: 'blur'}
        ],
        password: [{required: true, message: '请输入登录密码', trigger: 'blur'}]
        // imgcode: [
        //   {required: true, message: '请输入图片验证码', trigger: 'blur'},
        // ],
      },
      verifyCodeFormRules: {
        username: phone(),
        password: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {
            pattern: /^[0-9]{6}$/,
            message: '请输入6位数字验证码',
            trigger: 'blur'
          }
        ]
        // imgcode: [
        //   {required: true, message: '请输入图片验证码', trigger: 'blur'},
        // ],
      },
      verifyCodeForm: {
        username: '',
        password: '',
        imgcode: ''
      },
      submitLoading: false, // 登录按钮的loading
      activeName: 'passwordForm',
      loginWay: '0',
      sendCodeTitle: '获取验证码',
      count: '',
      sendCodeDiabled: false,
      codeLoading: false,
      alreadyAuthed: true, //是否已经授权过
      auth: {
        hospitalCompanyId: '',
        supplierId: ''
      },
      loading: false,
      timeOutObj: null,
      imgcode: {
        code: '',
        base64Str: ''
      },
      isChrome: this.myBrowser() === 'Chrome',
      isWinXP: this.detectOS() === 'WinXP',
      dragStatusData: false,
      sendVerificationCodeFlag: false
    }
  },
  created() {
    this.getMaintenance()
    this.enterLogin()
  },
  computed: {
    ...mapState([
      'companyId',
      'companyType',
      'authenticateFlag',
      'roleType',
      'approveStatus'
    ]),
    isHasHospitalFlag() {
      let flag = this.$route.query.id
      if (flag) return true
      return false
    }
  },
  destroyed() {
    document.onkeydown = null
  },
  methods: {
    dragStatus(val) {
      console.log('349val', val)
      this.dragStatusData = val
    },
    // 获取浏览器类型
    myBrowser() {
      var userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
      var isOpera = userAgent.indexOf('Opera') > -1
      console.log('当前浏览器信息：', userAgent)
      if (isOpera) {
        return 'Opera'
      } // 判断是否Edge浏览器
      if (userAgent.indexOf('Edge') > -1) {
        return 'Edge'
      } // 判断是否Opera浏览器
      if (userAgent.indexOf('Firefox') > -1) {
        return 'FF'
      } // 判断是否Firefox浏览器
      if (userAgent.indexOf('Chrome') > -1) {
        return 'Chrome'
      }
      if (userAgent.indexOf('Safari') > -1) {
        return 'Safari'
      } // 判断是否Safari浏览器
      if (
        userAgent.indexOf('compatible') > -1 &&
        userAgent.indexOf('MSIE') > -1 &&
        !isOpera
      ) {
        return 'IE'
      } // 判断是否IE浏览器
      if (userAgent.toLowerCase().indexOf('se 2.x') > -1) {
        return 'SOUGOU'
      }
    },
    onBlur(event) {
      this.passwordForm.username = event.target.value
    },
    timeOut(fn) {
      this.timeOutObj = setTimeout(() => {
        fn()
        this.timeOutObj = null
      }, 1000)
    },
    getMaintenance() {
      this.loading = true
      this.$axios({
        method: 'get',
        url: isMaintenance,
        params: {
          code: this.$route.query.code || ''
        }
      })
        .then(res => {
          this.maintainIngInfo = hasIn(res, ['data', 'payload'])
            ? res.data.payload
            : {}
          this.timeOut(() => {
            this.isMaintainIng = this.maintainIngInfo.releaseFlag
            this.loading = false
          })
        })
        .catch(() => {
          this.loading = false
        })
    },
    enterLogin() {
      document.onkeydown = e => {
        var key = window.event.keyCode
        if (key === 13) {
          this.login()
        }
      }
    },
    login() {
      let _this = this
      let randomCode = md5 (`${this.$store.state.randomCode}${this.$store.state.moveTime}m_pc_web`) 
      if (!this.isChrome) {
        return false
      }
      if (!this.dragStatusData) {
        this.$message.warning('请按住滑块拖放到最右边')
        return false
      }
      // let isTest = false
      // if (this.$route.query.safetest) {
      //   isTest = true
      // } else {
      //   isTest = false
      // }
      cookie.set('oldCommerceloginName', this.passwordForm.username || '')
      cookie.set('oldCommercePassword', this.passwordForm.password || '')
      let pwd = Encrypt(this.passwordForm.password)
      // 默认用户名登录
      let formType = 'passwordForm'
      let obj = {
        loginName: this.passwordForm.username,
        password: md5(this.passwordForm.password),
        pwd:pwd,
        randomCode: randomCode,
        source: 'm_pc_web'
        // captcha: isTest ? 'fdhs' : this.passwordForm.imgcode,
        // randomCode: isTest ? 'gkht' : this.imgcode.code,
      }
      let isPassword = true
      if (this.loginWay === '1') {
        cookie.set('smsLogin', true)
        cookie.set('smsLoginPhone', this.verifyCodeForm.username)
        cookie.set('smsLoginCode', this.verifyCodeForm.password)
        if (!this.sendVerificationCodeFlag){
          this.$message({type: 'success', message: '请获取验证码'})
          return false
        }
        isPassword = false
        formType = 'verifyCodeForm'
        obj = {
          phone: this.verifyCodeForm.username,
          verificationCode: this.verifyCodeForm.password,
          source: 'm_pc_web',
          randomCode: randomCode,
          // captcha: this.verifyCodeForm.imgcode,
          // randomCode: this.imgcode.code,
        }
      }
      this.$refs[formType].validate(valid => {
        if (valid) {
          this.submitLoading = true
          this.$store
            .dispatch('login', {
              isPassword,
              ...obj
            })
            .then(res => {
              if (res.data.code !== 0) {
                this.$refs.dragVerify.reset() //重置滑动验证码
                this.$refs.dragVerify2.reset() //重置滑动验证码
                this.getRandomCode()
              }
              this.submitLoading = false
              this.auth.supplierId = this.$store.state.companyId
              // 若是医院邀请经销商登录，也就是isHasHospitalFlag为true 的情况下，
              // 判断登录用户是否是经销商，如果是则进入登录后页面，如果不是，则提示并阻止下一步且清除本地存储的cookie
              if (
                this.isHasHospitalFlag &&
                this.$store.state.companyType !== 'AG'
              ) {
                this.$message({
                  type: 'warning',
                  message: '邀请链接仅经销商可以登录！'
                })
                this.$store.commit('logout', false)
                return
              }
              // 判断跳转地址，因为用户刚注册不去系统导航页面
              this.judgeToPage()
            })
            .catch(e => {
              this.getRandomCode()
              // TODO 异常处理
              this.$refs.dragVerify.reset() //重置滑动验证码
              this.$refs.dragVerify2.reset()
              this.dragStatusData = false
              this.submitLoading = false
            })
        } else {
          return false
        }
      })
    },
    // 地址判定跳转
    judgeToPage() {
      const APPRPVE_PATH = {
        AG: this.$PATH_CONST.companyList_edit + '?cid=', // 企业
        PA: this.$PATH_CONST.companyList_edit + '?cid=', // 企业
        DA: this.$PATH_CONST.companyList_edit + '?cid=', // 企业
        SV: this.$PATH_CONST.csoList_edit + '?cid=', // 医疗机构服务商
        AM: this.$PATH_CONST.threeCompanyList_edit + '?cid=', // 三方
        FC: this.$PATH_CONST.companyList_FCFAMM_edit + '?cid=', // 生产企业MM
        FA: this.$PATH_CONST.companyList_FCFAMM_edit + '?cid=', // 生产企业A
        MM: this.$PATH_CONST.companyList_FCFAMM_edit + '?cid=' // 生产企业
      }
      // 企业类型：经营企业AG 医疗机构HO
      if (this.companyType === '-1') {
        // 系统管理员直接跳转到院端工作台
        this.selAuthType()
      } else {
        // 非系统管理员，先判断是否已经进行企业认证
        if (this.authenticateFlag) {
          this.selAuthType()
        } else {
          if (!this.companyType || this.companyType === '-1') {
            // this.$message({
            //   type: 'warning',
            //   message: '公司类型不正确，请联系管理员'
            // })
            let curryCompanyId = cookie.get('companyId') || ''
            if (curryCompanyId === '0') {
              window.location.href = '/#/business/'
            } else {
              window.location.href = '/'
            }
          } else {
            // 0-初始状态（待审核）； 1-通过, 2-驳回（第一次发起会有该状态）, 3-待审核（已经审核过至少一次）,4-上一次已通过，现在被驳回,null表示空企业
            if (this.companyType === 'HO') {
              if (
                this.approveStatus === null ||
                this.approveStatus === 0 ||
                this.approveStatus === 3
              ) {
                window.location.href =
                  this.$PATH_CONST.hospitalList_edit + '?cid=' + this.companyId
              } else {
                window.location.href =
                  this.$PATH_CONST.hospitalList_detail +
                  '?cid=' +
                  this.companyId
              }
            } else {
              window.location.href =
                APPRPVE_PATH[this.companyType] + this.companyId
            }
          }
        }
      }
    },
    selAuthType() {
      if (!this.isHasHospitalFlag) {
        this.$router.replace(this.$PATH_CONST.main_page)
        return
      }
      this.$axios({
        method: 'get',
        url: checkHospitalAuthorization,
        params: {
          supplierId: this.auth.supplierId || '', //当前登录用户所在id
          hospital: this.auth.hospitalCompanyId //邀请医院联系人所在公司id
        }
      })
        .then(res => {
          // false未申请过，true已申请过
          if (res.data.payload) {
            this.$router.replace(this.$PATH_CONST.main_page)
          } else {
            // 显示申请授权的卡片
            this.alreadyAuthed = false
          }
        })
        .catch(() => {})
    },
    goRegister() {
      if (!this.isChrome) {
        return false
      }
      if (this.$route.query.id) {
        this.$router.push({
          path: this.$PATH_CONST.login_register,
          query: {
            id: this.$route.query.id
          }
        })
      } else {
        this.$router.push(this.$PATH_CONST.login_register)
      }
    },
    goRetrieve() {
      this.isChrome && this.$router.push(this.$PATH_CONST.login_retrieve)
    },
    messageBox(msg, type = 'warning') {
      this.$message({
        message: msg,
        type: type
      })
    },
    sendCode() {
      this.sendVerificationCodeFlag = true
      if (!this.isChrome) {
        return false
      }
      if (!/^1[23456789]\d{9}$/.test(this.verifyCodeForm.username)) {
        this.messageBox('请输入正确的手机号', 'warning')
        return
      }
      this.codeLoading = true
      this.$axios({
        method: 'post',
        url: sendVerificationCodeNoCheck,
        data: {
          phone: this.verifyCodeForm.username
        }
      })
        .then(data => {
          if (data.data.code === '0') {
            this.messageBox('验证码发送成功！', 'success')
          }
        })
        .finally(() => {
          this.codeLoading = false
          this.countDown()
        })
    },
    countDown() {
      if (this.sendCodeDiabled) return
      this.sendCodeDiabled = true
      this.count = TIME_COUNT
      let timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--
          this.sendCodeTitle = `${this.count}秒后重发`
        } else {
          this.sendCodeTitle = '重新获取'
          this.timer = null
          this.sendCodeDiabled = false
          clearInterval(timer)
        }
      }, 1000)
    },
    handleClick() {
      this.loginWay = LOGIN_WAY[this.activeName]
      this.$refs.dragVerify.reset() //重置滑动验证码
      this.$refs.dragVerify2.reset()
      this.dragStatusData = false
      this.$refs[this.activeName].resetFields()
      this.sendVerificationCodeFlag = false
      this.getRandomCode()
    },
    isInvitedHere() {
      let hospitalInvitedId = this.$route.query.id
      if (hospitalInvitedId) {
        this.$axios({
          method: 'get',
          url: findHospitalContactById,
          params: {
            contactId: hospitalInvitedId
          }
        }).then(res => {
          if (res.data.payload && res.data.code === '0') {
            this.info = res.data.payload
            this.auth.hospitalCompanyId = res.data.payload.companyId || ''
          }
        })
      }
    },
    // getImgCode() {
    //   this.$axios({
    //     method: 'get',
    //     url: getCaptchaImage
    //   })
    //     .then(res => {
    //       if (res.data.payload && res.data.code === '0') {
    //         let data = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
    //         this.imgcode = {
    //           code: data.code,
    //           base64Str: data.base64Str
    //         }
    //       }
    //     })
    //     .finally(() => {})
    // },
    _initUsername() {
      let userName = this.$route.query.userName
      if (userName) {
        this.passwordForm.username = userName
      }
    },
    detectOS() {
      var userAgent = navigator.userAgent
      var isWin =
        navigator.platform == 'Win32' || navigator.platform == 'Windows'
      var isMac =
        navigator.platform == 'Mac68K' ||
        navigator.platform == 'MacPPC' ||
        navigator.platform == 'Macintosh' ||
        navigator.platform == 'MacIntel'
      if (isMac) return 'Mac'
      var isUnix = navigator.platform == 'X11' && !isWin && !isMac
      if (isUnix) return 'Unix'
      var isLinux = String(navigator.platform).indexOf('Linux') > -1
      if (isLinux) return 'Linux'
      if (isWin) {
        var isWin2K =
          userAgent.indexOf('Windows NT 5.0') > -1 ||
          userAgent.indexOf('Windows 2000') > -1
        if (isWin2K) return 'Win2000'
        var isWinXP =
          userAgent.indexOf('Windows NT 5.1') > -1 ||
          userAgent.indexOf('Windows XP') > -1
        if (isWinXP) return 'WinXP'
        var isWin2003 =
          userAgent.indexOf('Windows NT 5.2') > -1 ||
          userAgent.indexOf('Windows 2003') > -1
        if (isWin2003) return 'Win2003'
        var isWinVista =
          userAgent.indexOf('Windows NT 6.0') > -1 ||
          userAgent.indexOf('Windows Vista') > -1
        if (isWinVista) return 'WinVista'
        var isWin7 =
          userAgent.indexOf('Windows NT 6.1') > -1 ||
          userAgent.indexOf('Windows 7') > -1
        if (isWin7) return 'Win7'
        var isWin7 =
          userAgent.indexOf('Windows NT 6.2') > -1 ||
          userAgent.indexOf('Windows 8') > -1
        if (isWin7) return 'Win8'
        var isWin7 =
          userAgent.indexOf('Windows NT 10.0') > -1 ||
          userAgent.indexOf('Windows 10') > -1
        if (isWin7) return 'Win10'
      }
      return 'other'
    },
    getRandomCode () {
      let timestamp = new Date().getTime()
      let source = 'm_pc_web'
      this.$axios({
        url: initDragBox,
        method: 'post',
        data: {
          timestamp: timestamp,
          source: source
        }
      })
        .then(res => {
          console.log('======res.data.payload:', res.data.payload)
          this.$store.commit('randomCode', res.data.payload)
          console.log('======res.data.payload:', this.$store.state.randomCode)
        })
        .catch(err => {
          reject(err);
        });
    },
    codeShow () {
      this.$emit('codeShow', true)
    }
  },
  mounted() {
    this.isInvitedHere()
    // this.getImgCode()
    this._initUsername()
    if (!this.isChrome) {
      this.sendCodeDiabled = true
    }
    this.getRandomCode()
  }
}
</script>

<style lang="less">
@import '../m-front-common/pc/assets/var.less';
.login-box-login {
  button.el-button.el-button--primary.is-disabled {
    color: white !important;
  }
  .wechart-icon-part {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img {
      width: 46px;
      height: 46px;
    }
    span {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333;
      letter-spacing: 0;
      line-height: 22px;
    }
    &:hover {
      cursor: pointer;
    }
  }
  .password-input {
    .el-button--primary {
      width: 100px;
      height: 40px;
      font-size: 14px;
      box-sizing: border-box;
      padding: 10px 15px;
    }
  }
  .el-button--primary {
    background: #4d84ff;
    border-radius: 3px;
    color: white;
    font-family: PingFangSC-Regular;
    color: #fff;
    letter-spacing: 0;
    border-color: #4d84ff;
  }
  // background: pink;
  width: 414px;
  height: 458px;
  .foot-flex {
    display: flex;
    justify-content: space-between;
    color: #a7b1c7;
    cursor: pointer;
    .login-btn-new {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333;
      letter-spacing: 0;
    }
  }
  .login-box-inner {
    .main {
      box-sizing: border-box;
      width: 414px;
      height: 458px;
      padding: 35px 42px 70px;
      background-color: #fff;
      border-radius: 6px;

      .login-tab {
        .el-tabs__nav-wrap {
          display: flex;
          justify-content: center;
          &::after {
            height: 0;
          }
        }

        .el-tabs__active-bar {
          width: 20px !important;
          height: 0;
        }
        .el-tabs__header {
          margin-bottom: 38px;
        }
        .el-tabs__item {
          font-size: 20px;
          height: 20px;
          line-height: 20px;
          color: #999;
          &:nth-child(2) {
            border-right: 2px solid #e5e5e5;
          }
        }
        .el-tabs__item.is-active {
          color: #333;
        }
      }
      // 登录注册button
      .login-btn {
        width: 100%;
        margin-bottom: 10px;
        margin-left: 0;
        height: 42px;
        font-size: 16px;

        &.el-button--medium {
          padding-top: 15px;
          padding-bottom: 15px;
          font-size: 16px;
        }
      }

      .el-input {
        .el-input__inner {
          height: 48px;
          line-height: 48px;
          border-radius: 2px;
        }

        .el-input__prefix {
          line-height: 48px;
          border-radius: 2px;
        }
      }

      .password-form {
        .el-form-item {
          .keep {
            margin-top: 10px;
            color: #a7b1c7;
          }

          .foot {
            display: flex;
            justify-content: space-between;
            color: #a7b1c7;
            cursor: pointer;
            .login-btn-new {
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #333;
              letter-spacing: 0;
            }
          }

          .login-btnBox {
            display: flex;
            flex-direction: column;
          }
          .imgcode {
            position: relative;
            .el-input__inner {
              text-indent: 15px;
            }
            .image {
              cursor: pointer;
              position: absolute;
              right: 30px;
              top: 14px;
            }
            &::before {
              content: '';
              position: absolute;
              left: 13px;
              top: 3px;
              z-index: 9;
              width: 11px;
              height: 13px;
              // background:
              //   url('../../../m-front-common/pc/assets/img/yanzheng.png')
              //   no-repeat;
              // background-size: 100% 100%;
              margin-top: 13px;
            }
          }
        }
      }

      .verifyCode-form {
        .login-btn {
          margin-top: 0;
        }

        .operate-btn {
          display: flex;
          justify-content: space-between;
          color: #a7b1c7;
          cursor: pointer;

          .el-checkbox {
            color: #a7b1c7;
          }
        }

        .el-input__suffix {
          line-height: 48px;
          .el-button--medium {
            padding: 15px 15px 15px 22px;

            &.el-button--text {
              color: @themeGreen;
            }
          }
        }
        .imgcode {
          position: relative;
          .image {
            cursor: pointer;
            position: absolute;
            right: 30px;
            top: 14px;
          }
        }
      }
    }
  }
  .login-box-inner-xp {
    position: absolute;
    transform: translate(35%, -50%);
    left: 50%;
    // top: 50%;
    padding-top: 28%;

    .main {
      box-sizing: border-box;
      width: 414px;
      height: 458px;
      padding: 35px 32px 70px;
      background-color: #fff;

      .login-tab {
        .el-tabs__nav-wrap {
          &::after {
            height: 0;
          }
        }

        .el-tabs__active-bar {
          width: 20px !important;
        }
      }

      .login-btn {
        width: 100%;
        margin-bottom: 10px;
        margin-left: 0;

        &.el-button--medium {
          padding-top: 15px;
          padding-bottom: 15px;
          font-size: 16px;
        }
      }

      .el-input {
        .el-input__inner {
          height: 44px;
          line-height: 44px;
        }

        .el-input__prefix {
          line-height: 44px;
        }
      }

      .password-form {
        .el-form-item {
          .keep {
            margin-top: 10px;
            color: #a7b1c7;
          }

          .foot {
            display: flex;
            justify-content: space-between;
            color: #a7b1c7;
            cursor: pointer;
            .login-btn-new {
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #333;
              letter-spacing: 0;
            }
          }

          .login-btnBox {
            display: flex;
            flex-direction: column;
          }
          .imgcode {
            position: relative;
            .el-input__inner {
              text-indent: 15px;
            }
            .image {
              cursor: pointer;
              position: absolute;
              right: 30px;
              top: 14px;
            }
            &::before {
              content: '';
              position: absolute;
              left: 13px;
              top: 3px;
              z-index: 9;
              width: 11px;
              height: 13px;
              // background:
              //   url('../../../m-front-common/pc/assets/img/yanzheng.png')
              //   no-repeat;
              // background-size: 100% 100%;
              margin-top: 13px;
            }
          }
        }
      }

      .verifyCode-form {
        .login-btn {
          margin-top: 0;
        }

        .operate-btn {
          display: flex;
          justify-content: space-between;
          color: #a7b1c7;
          cursor: pointer;

          .el-checkbox {
            color: #a7b1c7;
          }
        }

        .el-input__suffix {
          .el-button--medium {
            padding: 15px 15px 15px 22px;

            &.el-button--text {
              color: @themeGreen;
            }
          }
        }
        .imgcode {
          position: relative;
          .image {
            cursor: pointer;
            position: absolute;
            right: 30px;
            top: 14px;
          }
        }
      }
    }
  }
}
</style>
